<script setup lang="ts">

import {message} from "ant-design-vue";
import {getCurrentInstance} from "vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";
import shopMonitorListShopPage from "~/utils/interception/sycm/shopMonitorListShopPage";

const loginVisible = ref<boolean>(false);
const {proxy} = getCurrentInstance();
const showModal = ref<boolean>(false);
const showZs = ref<boolean>(false);
const columns = ref<any[]>([]);
const dataSource = ref<any[]>();
const $req = proxy.$req;
const calc = (data: any[]) => {   // 计算columns和dataSource
  columns.value = [
    {
      dataIndex: 'shop.title',
      title: '店铺',
      dataType: 'custom',
      slot: 'shop',
      fixed: 'left',
      width: 200,
    },
  ];
  SYCM.assignData(data);
  data.map(item => {
    ['shop', 'cate'].map(index => {
      // 计算买家数
      try {
        item[`${index}_payUserNum`] = (item[`${index}_uvIndex_tran`] * (parseFloat(item[`${index}_payRateIndex_tran`]) / 100)).toFixed(0);
        if (isNaN(item[`${index}_payUserNum`])) {
          item[`${index}_payUserNum`] = 0;
        }
      } catch (e) {
        item[`${index}_payUserNum`] = 0;
      }
      // 计算UV价值
      try {
        item[`${index}_uvValue`] = (item[`${index}_tradeIndex_tran`] / item[`${index}_uvIndex_tran`]).toFixed(2);
        if (isNaN(item[`${index}_uvValue`])) {
          item[`${index}_uvValue`] = 0;
        }
      } catch (e) {
        item[`${index}_uvValue`] = 0;
      }
      // 计算客单价
      try {
        item[`${index}_perCustomerTransaction`] = (item[`${index}_tradeIndex_tran`] / item[`${index}_payUserNum`]).toFixed(2);
        if (isNaN(item[`${index}_perCustomerTransaction`]) || item[`${index}_payUserNum`] == 0) {
          item[`${index}_perCustomerTransaction`] = 0;
        }
      } catch (e) {
        item[`${index}_perCustomerTransaction`] = 0;
      }
      // 计算搜索占比
      try {
        item[`${index}_seIpvUvHitsRate`] = ((item[`${index}_seIpvUvHits_tran`] / item[`${index}_uvIndex_tran`]) * 100).toFixed(2);
        if (isNaN(item[`${index}_seIpvUvHitsRate`]) || item[`${index}_uvIndex_tran`] == 0) {
          item[`${index}_seIpvUvHitsRate`] = 0;
        }
        item[`${index}_seIpvUvHitsRate`] += '%';
      } catch (e) {
        item[`${index}_seIpvUvHitsRate`] = 0 + '%';
      }
      // 计算收藏率
      try {
        item[`${index}_cltHitsRate`] = ((item[`${index}_cltHits_tran`] / item[`${index}_uvIndex_tran`]) * 100).toFixed(2);
        if (isNaN(item[`${index}_cltHitsRate`]) || item[`${index}_uvIndex_tran`] == 0) {
          item[`${index}_cltHitsRate`] = 0;
        }
        item[`${index}_cltHitsRate`] += '%';
      } catch (e) {
        item[`${index}_cltHitsRate`] = 0 + '%';
      }
      // 计算加购率
      try {
        item[`${index}_cartHitsRate`] = ((item[`${index}_cartHits_tran`] / item[`${index}_uvIndex_tran`]) * 100).toFixed(2);
        if (isNaN(item[`${index}_cartHitsRate`]) || item[`${index}_uvIndex_tran`] == 0) {
          item[`${index}_cartHitsRate`] = 0;
        }
        item[`${index}_cartHitsRate`] += '%';
      } catch (e) {
        item[`${index}_cartHitsRate`] = 0 + '%';
      }
      // 计算收藏加购率 收藏率+加购率
      try {
        item[`${index}_cltCartHitsRate`] = (parseFloat(item[`${index}_cltHitsRate`]) + parseFloat(item[`${index}_cartHitsRate`])).toFixed(2);
        if (isNaN(item[`${index}_cltCartHitsRate`]) || item[`${index}_cartHitsRate`] == 0) {
          item[`${index}_cltCartHitsRate`] = 0;
        }
        item[`${index}_cltCartHitsRate`] += '%';
      } catch (e) {
        item[`${index}_cltCartHitsRate`] = 0 + '%';
      }
    })

  })
  // console.log(data);
  if (showZs.value) {
  } else {
    [{
      index: 'shop',
      name: '店铺',
    }, {
      index: 'cate',
      name: '类目'
    }].map((item) => {
      columns.value.push({
        title: `${item.name}交易金额`,
        dataIndex: `${item.index}_tradeIndex_tran`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: number; }, b: {
          [x: string]: number;
        }) => a[`${item.index}_tradeIndex_tran`] - b[`${item.index}_tradeIndex_tran`],
      })
      // columns.value.push({
      //   title: `${item.name}交易指数`,
      //   dataIndex: `${item.index}_tradeIndex`,
      //   align: 'center',
      //   width: 100,
      //   sorter: (a: { [x: string]: number; }, b: { [x: string]: number; }) => a[`${item.index}_tradeIndex`] - b[`${item.index}_tradeIndex`],
      // })
      columns.value.push({
        title: `${item.name}访客数`,
        dataIndex: `${item.index}_uvIndex_tran`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: number; }, b: {
          [x: string]: number;
        }) => a[`${item.index}_uvIndex_tran`] - b[`${item.index}_uvIndex_tran`],
      })
      columns.value.push({
        title: `${item.name}搜索人数`,
        dataIndex: `${item.index}_seIpvUvHits_tran`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: number; }, b: {
          [x: string]: number;
        }) => a[`${item.index}_seIpvUvHits_tran`] - b[`${item.index}_seIpvUvHits_tran`],
      })
      columns.value.push({
        title: `${item.name}加购人数`,
        dataIndex: `${item.index}_cartHits_tran`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: number; }, b: {
          [x: string]: number;
        }) => a[`${item.index}_cartHits_tran`] - b[`${item.index}_cartHits_tran`],
      })
      columns.value.push({
        title: `${item.name}收藏人数`,
        dataIndex: `${item.index}_cltHits_tran`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: number; }, b: {
          [x: string]: number;
        }) => a[`${item.index}_cltHits_tran`] - b[`${item.index}_cltHits_tran`],
      });
      columns.value.push({
        title: `${item.name}支付转换率`,
        dataIndex: `${item.index}_payRateIndex_tran`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: string; }, b: {
          [x: string]: string;
        }) => parseFloat(a[`${item.index}_payRateIndex_tran`]) - parseFloat(b[`${item.index}_payRateIndex_tran`]),
      });
      columns.value.push({
        title: `${item.name}买家数`,
        dataIndex: `${item.index}_payUserNum`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: number; }, b: {
          [x: string]: number;
        }) => a[`${item.index}_payUserNum`] - b[`${item.index}_payUserNum`],
      });
      columns.value.push({
        title: `${item.name}UV价值`,
        dataIndex: `${item.index}_uvValue`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: number; }, b: {
          [x: string]: number;
        }) => a[`${item.index}_uvValue`] - b[`${item.index}_uvValue`],
      });
      columns.value.push({
        title: `${item.name}客单价`,
        dataIndex: `${item.index}_perCustomerTransaction`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: number; }, b: {
          [x: string]: number;
        }) => a[`${item.index}_perCustomerTransaction`] - b[`${item.index}_perCustomerTransaction`],
      });
      // 搜索占比
      columns.value.push({
        title: `${item.name}搜索占比`,
        dataIndex: `${item.index}_seIpvUvHitsRate`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: string; }, b: {
          [x: string]: string;
        }) => parseFloat(a[`${item.index}_seIpvUvHitsRate`]) - parseFloat(b[`${item.index}_seIpvUvHitsRate`]),
      });
      // 收藏率
      columns.value.push({
        title: `${item.name}收藏率`,
        dataIndex: `${item.index}_cltHitsRate`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: string; }, b: {
          [x: string]: string;
        }) => parseFloat(a[`${item.index}_cltHitsRate`]) - parseFloat(b[`${item.index}_cltHitsRate`]),
      });
      // 加购率
      columns.value.push({
        title: `${item.name}加购率`,
        dataIndex: `${item.index}_cartHitsRate`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: string; }, b: {
          [x: string]: string;
        }) => parseFloat(a[`${item.index}_cartHitsRate`]) - parseFloat(b[`${item.index}_cartHitsRate`]),
      });
      // 收藏加购率
      columns.value.push({
        title: `${item.name}收藏加购率`,
        dataIndex: `${item.index}_cltCartHitsRate`,
        align: 'center',
        width: 100,
        sorter: (a: { [x: string]: string; }, b: {
          [x: string]: string;
        }) => parseFloat(a[`${item.index}_cltCartHitsRate`]) - parseFloat(b[`${item.index}_cltCartHitsRate`]),
      });
    })
  }
  dataSource.value = data;
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    // const req: RequestInterception = inject('req');
    const dateDom = document.querySelector("[id^=__qiankun_microapp_wrapper_for_op_mc] > div > div > div > div > div.ebase-FaCommonFilter-module__root > div > div > div > div > div.ebase-FaCommonFilter-module__top > div.ebase-FaCommonFilter-module__right > div > div > div.oui-date-picker-current-date")?.innerHTML;
    let date = dateDom?.replace(' ', '');
    if (!date) {
      message.error('获取数据失败，请刷新页面重试！');
      return;
    }
    let interception: ReqInit;
    if (date.indexOf(':') > 0) {
      interception = shopMonitorListShopPage[0]
    } else {
      interception = shopMonitorListShopPage[1]
    }
    let data = $req.getResponse(interception);
    if (!data) {
      message.error('获取数据失败，请刷新页面重试！');
      return;
    }
    // console.log(data.data.data.data);
    calc(data.data.data.data);
    showModal.value = true;
  }
}

</script>

<template>
  <base-app>
    <a-button-group>
      <user :style="{
        marginRight: 0
      }"
      />
      <a-button size="small" @click="handle" type="primary">一键转化</a-button>
      <user-login-modal :login-visible="loginVisible" @close="loginVisible = false"/>
    </a-button-group>
    <custom-modal v-model:visible="showModal" width="95%" title="竞争-监控店铺-竞店列表">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
      </template>
      <!--        <a-checkbox v-model:checked="showZs">显示指数</a-checkbox>-->
      <!--      </template>-->
      <!--      <a-spin>-->

      <div>
        <base-table table-name="竞争-监控店铺-竞店列表" :columns="columns" :data-source="dataSource">
          <template #shop="row">
            <a-row type="flex" style="width: 200px;">
              <a-col>
                <a-image :src="row.shop.pictureUrl" style="width: 30px;height:30px;border-radius: 5px;"></a-image>
              </a-col>
              <a-col style="padding-left: 5px;">
                <div class="text-ellipsis">
                  <a :href="row.shop.shopUrl" target="_blank">{{ row.shop.title }}</a>
                </div>
              </a-col>
            </a-row>
          </template>
        </base-table>
      </div>
      <!--      </a-spin>-->
    </custom-modal>
  </base-app>
</template>

<style scoped>
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 30px;
  width: calc(200px - 30px - 5px);
}
</style>
